<template>
    <div class="content-wrap">
        <!--pages/editAddress/editAddress.wxml-->
        <div class='item flex'>
            <div class='label flex'>
                <span>收</span>
                <span>货</span>
                <span>人：</span>
            </div>
            <input type='text' v-model='name' maxlength='6'></input>
        </div>
        <div class='item flex'>
            <div class='label flex'>
                <span>手</span>
                <span>机</span>
                <span>号：</span>
            </div>
            <input type='number' v-model='phone' maxlength='11'></input>
        </div>
        <div class='item flex' @click="openRegion">
            <div class='label flex'>
                <span>省</span>
                <span>市</span>
                <span>区：</span>
            </div>
            <div>{{province}}{{city}}{{area}}</div>
        </div>
        <div class='item flex'>
            <div class='label flex'>
                <span>详</span>
                <span>细</span>
                <span>地</span>
                <span>址：</span>
            </div>
            <input type='text' v-model='detail'></input>
        </div>
        <div class='submit shadow flex' @click='save'>保存</div>
        <div class="regionPicker-wrap" :class="{'showRegion':regionPicker}">
            <div class="regionPicker">
                <div class="flex btn-wrap">
                    <button class="btn cancle" @click="cancleTap">取消</button>
                    <button class="btn true" @click="trueTap">确定</button>
                </div>
                <mt-picker :slots="regionSlots" @change="onRegionChange" value-key="name"></mt-picker>
            </div>
        </div>
    </div>
</template>

<script>
import { DatetimePicker, Toast, Picker } from "mint-ui";
import { myReceiptAddress } from "./../api/index";
import regionList from "../base/js/region.js";
 export default{
     data(){
         return{
            name:'',
            phone:'',
            area:'',
            detail:'',
            province:'',
            city:'',
            flag:true,
            editStatus:0,
            id:'',
            regionPicker:false,
            startDate:'',
            today:'',
            regionSlots:[
                {
                    flex: 1,
                    values: [],
                    textAlign: 'left'
                }, {
                    flex: 1,
                    values: [],
                    textAlign: 'center'
                }, {
                    flex: 1,
                    values: [],
                    textAlign: 'right'
                }
            ],
            timeout:1500
         }
     },
     mounted(){
        let address = this.$route.params.address
        if(address){
            this.editStatus = 1
            this.id = address.id
            this.name = address.name
            this.phone = address.mobile
            this.detail = address.address
            this.province = address.area_arr[0]
            this.city = address.area_arr[1]
            this.area = address.area_arr[2]
        }
        this.startDate = new Date(1900, 1, 1);
        this.today = new Date();
        this.regionSlots = [
            {
                flex: 1,
                values: regionList,
            }, {
                flex: 1,
                values: regionList[0].city,
            }, {
                flex: 1,
                values: regionList[0].city[0].area,
            }
        ]
        
     },
     methods:{
        openRegion(){
            this.regionPicker = !this.regionPicker
        },
        save(){
            let mstr = sessionStorage.getItem('mstr')
            if (!this.name.replace(/(^\s*)|(\s*$)/g, "")){
                Toast({
                    message:'请输入姓名',
                    position:'center',
                    duration:2000
                });
                return false;
            }
            if (!this.isTel(this.phone)){
                Toast({
                    message:'请输入有效手机号码',
                    position:'center',
                    duration:2000
                });
                return false;
            }
            if (!this.province.replace(/(^\s*)|(\s*$)/g, "")){
                Toast({
                    message:'请选择地区',
                    position:'center',
                    duration:2000
                });
                return false;
            }
            if (!this.detail.replace(/(^\s*)|(\s*$)/g, "")){
                Toast({
                    message:'请输入详细地址',
                    position:'center',
                    duration:2000
                });
                return false;
            }
            let options={}
            if(this.editStatus == 1){
                options = {
                    mstr,
                    addid:this.id,
                    type:'edit',
                    name:this.name,
                    province:this.province,
                    city:this.city,
                    detail:this.detail,
                    county:this.area,
                    mobile:this.phone
                }
            }else{
                options = {
                    mstr,
                    type:'add',
                    name:this.name,
                    province:this.province,
                    city:this.city,
                    detail:this.detail,
                    county:this.area,
                    mobile:this.phone
                }
            }
            
            //保存地址
            if(this.flag){
                this.flag = false
                myReceiptAddress(options).then((res)=>{
                    if(res.data.status === 1){
                        Toast({
                            message:'保存成功',
                            position:'center',
                            duration:2000
                        });
                        setTimeout(()=>{
                            this.$router.back(-1)
                        },1500)
                    }else{
                        Toast({
                            message:res.data.info,
                            position:'center',
                            duration:2000
                        });
                    }
                    setTimeout(()=>{
                        this.flag = true
                    },this.timeout)
                })
            }
            
        },
        cancleTap(){
             this.regionPicker = false
        },
        trueTap(){
             this.regionPicker = false
        },
        //选择省市区
        onRegionChange(picker, values) {
            if(values[0]){
                picker.setSlotValues(1, values[0].city);
                let town = [];
                if(values[1]){
                    town = values[1].area;
                }
                picker.setSlotValues(2,town);
            }
            this.province = `${picker.getValues()[0].name}`
            this.city = `${picker.getValues()[1].name}`
            this.area = `${picker.getValues()[2]}`
        },
        //验证手机号码
        isTel(mobile) {
            return /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(mobile);
        },
     }
 }
</script>


<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/editAddress/editAddress.wxss */
.content-wrap{
    padding-bottom:torem(30px);
    background: #fff;
}
.item{
    padding: 0 torem(30px);
    height: torem(90px);
    width: 100%;
    align-items: center;
    font-size: torem(28px);
    border-bottom: 1px solid #e7e7e7;
    display: flex;
    margin-bottom: torem(20px);
} 
.item .label{
    width: torem(140px);
    justify-content: space-between;
    margin-right: torem(15px);
    color: #333333;
    font-weight: bold;
}
.item input{
    flex: 1;
    height: 100%; 
    padding-left: torem(20px);
    font-size: torem(28px);
}
.item:nth-child(4){
    border-bottom: none;
}
.submit{
    width: 100%;
    height: torem(85px);
    align-items: center;
    justify-content: center;
    background: #D55940;
    color: #fff;
    font-size: torem(28px);
    position: absolute;
    bottom: 0;
    left:0;
    box-shadow: torem(-2px) torem(6px) torem(9px) 0 rgba(228, 107, 9, 0.75);
}
.item.status{
    justify-content: space-between;
    padding-right: 0;
}
.regionPicker-wrap {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  transition: all 0.5s;
  background: #fff;
}
.regionPicker-wrap.showRegion {
  bottom: 0;
}

.regionPicker-wrap .regionPicker {
  position: relative;
}

.regionPicker-wrap .regionPicker .btn {
  position: absolute;
  top: torem(-10px);
  color: #3aaaff;
  font-size: torem(26px);
}
.regionPicker-wrap .regionPicker .cancle {
  left: torem(50px);
}
.regionPicker-wrap .regionPicker .true {
  right: torem(50px);
}
.regionPicker-wrap .regionPicker{
    padding-top: torem(70px);
}
.regionPicker-wrap .regionPicker .btn-wrap{
    justify-content: space-between;
    position: absolute;
    top: torem(30px);
    width: 100%;
    padding: 0 torem(50px);
}
.regionPicker .btn-wrap .btn{
    color: #3aaaff;
    font-size: torem(26px);
    padding: torem(10px) torem(20px);
}

</style>